<template>
    <canvas id="canvas"></canvas>
</template>



<script setup lang="ts">
  import {onMounted} from "vue";
  import RenderContext from "@/views/cg/lib/RenderContext.ts";
  import {Model, shape, matrix } from '../lib'
  import {loop} from "@/views/cg/lib/time/loop.ts";
  import gui from '@/views/cg/lib/gui/index'
  import {translate} from "element-plus";

  onMounted(()=>{

    let gl = RenderContext.getGL()
    // let program = RenderContext.getProgram()

    // [
    //   2/gl.canvas.width, 0, -1,
    //   0, -2/gl.canvas.height,-1,
    //   0, 0, 1
    // ]

    // y -> [0,height] 但是绘制的时候 是 反过来的，所以转置后的 y符号改变了

    const worldMatrix = [
      2/gl.canvas.width, 0, 0,
      0, -2/gl.canvas.height,0,
      -1, +1, 1
    ]

    const mesh = shape.d2_f(0, 0, 100, 150, 30)
    const model = new Model(mesh)
    model.setWorldMatrix(worldMatrix)
    model.setVectorUniform("u_color", [
      Math.random(),
      Math.random(),
      Math.random(),
      1.0
    ])
    // 控制面板
    let controle = {
      translatex :0,
      translatey:0,
      rotate:0,
      scale:1.0
    }
    // let translate = [0, 0]
    // let rotate = 0
    // let scale = 1.0

    /*const widget = new Widget([
      {
        type:'slider',
        range:[0,gl.canvas.width],
        onChange: (value) => {
          translate[0] = value
        },
        label:'x'
      },
      {
        type:'slider',
        range:[0,gl.canvas.height],
        onChange: (value) => {
          translate[1] = value
        },
        label:'y'
      },
      {
        type:'slider',
        range:[0, 2*Math.PI],
        onChange:(value) => {
          rotate = value
        },
        label:'r'
      },
      {
        type:'slider',
        range:[0.1,3],
        onChange:(value) => {
          scale = value
        },
        label:'s'
      }
    ])
    widget.render()*/

    gui.add(controle, 'translatex').min(0).max(gl.canvas.width).name('x').onChange((value)=>{
      console.log('value值变化x',value)
    })

    gui.add(controle, 'translatey').min(0).max(gl.canvas.height).name('y').onChange((value)=>{
      console.log('value值变化y',value)
    })

    gui.add(controle, 'rotate').min(0).max(2*Math.PI).name('旋转').onChange((value)=>{
      console.log('value值变化_旋转',value)
    })

    gui.add(controle, 'scale').min(0.1).max(3).name('缩放').onChange((value)=>{
      console.log('value值变化_缩放',value)
    })

    loop(()=>{
      // 单位矩阵
      let uMatrix = matrix.identity3d()

      const matTranslate = matrix.translate2d(controle.translatex, controle.translatey)
      const matRotate = matrix.rotate2d(controle.rotate)
      const matScale = matrix.scale2d(controle.scale,controle.scale)

      // 思考尝试使用不同的顺序得到的结果为什么不一样？
      // uMatrix = matrix.multiply3d(uMatrix, matTranslate, matScale, )
      // uMatrix = matrix.multiply3d(uMatrix, matScale, matTranslate, matR)

      // 围绕自己的中心旋转  100/2  150/2 中心点 复合矩阵
      const matBeforeRotate = matrix.translate2d(-50, -75)
      const matAfterRotate = matrix.translate2d(50, 75)
      // console.log(matBeforeRotate)

      // 矩阵顺序不一样，影响效果，因为矩阵 不支持交换律，所以 先旋转 在缩放 在平移
      uMatrix = matrix.multiply3(
        uMatrix,
        matBeforeRotate,
        matRotate,
        matAfterRotate,
        matScale,
        matTranslate
      )
      model.setUnitMatrix(uMatrix)
      model.draw()
    })
  })
</script>

<style scoped lang="scss">
#canvas{
  width: 100%;
  height: 100%;
  display: block;
}
</style>
